import { WingBlank, Grid } from 'antd-mobile'
import { Icon } from 'antd'
import router from 'umi/router'
// import styles from './index.scss'
const icons = [
  <Icon type="team" style={{ fontSize: '300%' }} />,
  <Icon type="customer-service" style={{ fontSize: '300%' }} />,
  <Icon type="read" style={{ fontSize: '300%' }} />,
  <Icon type="profile" style={{ fontSize: '300%' }} />
]
const data = Array.from(new Array(4)).map((_val, i) => ({
  icon: icons[i],
  text: `${['社保', '公服', '仲裁', '执法'][i]}`,
  id: `uidiihae9${i}wiqeeq${i}wklhle`
}))

const GridExample = () => {
  return (
    <WingBlank size="lg">
      <div className='sub-title'>请根据您所办理的事务选择办事机构</div>
      <Grid
        data={data}
        columnNum={2}
        hasLine={false}
        activeStyle={false}
        onClick={(el, index) => router.push(`/business?of=${index}`)}
      />
    </WingBlank>
  )
}

export default GridExample
